<template>
  <div>
    <h3>当前步骤剩余时间：{{openendtime}}</h3>
    <div id="container" ref="childRef"/>
  </div>
</template>
<script>
// import { Graph } from "@antv/x6";
export default {
  name: "",
  data() {
    return {
      activeName: "first",
      time:'00:00:10',
      graph:undefined,
      qty:1,
      endqty:8,
      data:{
        // 节点
        nodes: [
          {
            id: "node1", // String，可选，节点的唯一标识
            x: 100, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "开始", // String，节点标签
            shape: "ellipse",
            attrs: {
              body: {
                stroke: "#1890ff",
              },
            },
          },
          {
            id: "node2", // String，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 150, // Number，必选，节点位置的 y 值
            width: 200, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "生成初代高对抗群体种群", // String，节点标签
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node3", // String，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 240, // Number，必选，节点位置的 y 值
            width: 200, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "记录初代种群样本的结构信息", // String，节点标签
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node4", // String，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 350, // Number，必选，节点位置的 y 值
            width: 200, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "记录初代种群样本个体适应性", // String，节点标签
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node5",
            x: 340,
            y: 40,
            width: 200,
            height: 40,
            label: "筛选适应度合适的对抗样本",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node6",
            x: 330,
            y: 120,
            width: 230,
            height: 100,
            label: "动态沙箱验证是否保留\n样本原始行为",
            shape: "polygon",
            attrs: {
              body: {
                refPoints: "0,10 10,0 20,10 10,20",
                stroke: "#000",
              },
            },
          },
          {
            id: "node7",
            x: 330,
            y: 260,
            width: 230,
            height: 40,
            label: "遗传，变异生成子代对抗样本种群",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node8",
            x: 330,
            y: 350,
            width: 230,
            height: 100,
            label: "迭代遗传过程是否结束",
            shape: "polygon",
            attrs: {
              body: {
                refPoints: "0,10 10,0 20,10 10,20",
                stroke: "#000",
              },
            },
          },
          {
            id: "node9",
            x: 395,
            y: 500,
            width: 100,
            height: 40,
            label: "结束",
            shape: "ellipse",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node10",
            x: 700,
            y: 200,
            width: 140,
            height: 40,
            label: "调整种群适应度策略",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
          {
            id: "node11",
            x: 640,
            y: 60,
            width: 140,
            height: 40,
            label: "",
            shape: "polygon",
            attrs: {
              body: {
                stroke: "#000",
              },
            }
          },
        ],
        // 边
        edges: [
          {
            source: "node1",
            target: "node2",
            attrs: {
              line: {
                stroke: "#1890ff",
                strokeDasharray: 5,
                targetMarker: "classic",
                style: {
                  animation: "ant-line 30s infinite linear",
                },
              },
            },
          },
          {
            source: "node2",
            target: "node3",
          },
          {
            source: "node3",
            target: "node4",
          },
          {
            source: "node4",
            target: "node5",
            vertices: [
              { x: 300, y: 370 },
              { x: 300, y: 60 },
            ],
          },
          {
            source: "node5",
            target: "node6",
          },
          {
            source: "node6",
            target: "node7",
            labels: "是",
          },
          {
            source: "node7",
            target: "node8",
          },
          {
            source: "node8",
            target: "node9",
            labels: "是",
          },
          {
            source: "node8",
            target: "node10",
            vertices: [
              { x: 700, y: 400 },
              { x: 770, y: 400 },
            ],
            labels: "否",
          },
          {
            source: "node10",
            target: "node5",
            vertices: [
              { x: 770, y: 130 },
              { x: 770, y: 60 },
            ],
          },
          {
            source: "node6",
            target: "node11",
            vertices: [
              { x: 630, y: 170 },
              { x: 640, y: 170 },
            ],
            labels: "否",
          },
        ],
      },
      openendtime:undefined,
    };
  },
  mounted() {
    // this.initGraph();
  },
  methods: {
    dateHandle(end){
      // 使用定时器，每秒执行获取时间，执行一次函数
      let nowTime=this.$moment().format("YYYY-MM-DD 00:00:00");
        let endTime=this.$moment().format("YYYY-MM-DD "+end);//活动结束时间
      let setInt=setInterval(() => {
        let changeTime=new Date(endTime).getTime()-new Date(nowTime).getTime();//时间戳差值
        if(changeTime<=0){
          clearInterval(setInt)
          if(this.qty==this.endqty)
          {
            return;
          }
          this.data.edges[this.qty-1].attrs=undefined;
          this.data.nodes[this.qty-1].attrs.body.stroke=undefined;
          this.data.nodes[this.qty].attrs.body.stroke="#1890ff";
          this.data.edges[this.qty].attrs={
              line: {
                stroke: "#1890ff",
                strokeDasharray: 5,
                targetMarker: "classic",
                style: {
                  animation: "ant-line 30s infinite linear",
                },
              },
            }
            this.qty++;
             this.initGraph();
        }else{
          endTime = new Date(endTime).getTime()-1000;
          this.openendtime=this.$moment(endTime).format("HH:mm:ss")
        }
      }, 1000); 
    },
    initGraph() {
      // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
       var datacan = this.data;

      // 2. 渲染画布
       this.graph = new Graph({
        container: document.getElementById("container"),
        width: 900,
        height: 600,
      });

      // 3. 渲染我们的节点和边
      this.graph.fromJSON(datacan);
      this.graph.disablePanning();
      this.dateHandle(this.time);
    },
  },
};
</script>
<style>
@keyframes ant-line {
  to {
    stroke-dashoffset: -1000;
  }
}
</style>